<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button>按钮</button>
  <button id="cancel">取消</button>
  <script>
    let button = document.querySelector('button');
    let cancel = document.querySelector('#cancel');
    // 创建ajax对象
    let xhr = new XMLHttpRequest()
    button.onclick = function () {
      // ajax对象以什么方式对哪里发送请求
      xhr.open('get', 'http://127.0.0.1:8080')
      xhr.timeout = 2000;
      xhr.ontimeout = function (){
        alert('超时了')
      }
      // ajax对象发送请求
      xhr.send()
      // 当客户端接受服务端的响应数据后,会触发onload事件
      xhr.onload = function () {
        console.log('成功接受到服务端请求')
        console.log(xhr.responseText)
      }
    }
    // 取消ajax请求
    cancel.onclick = function (){
      xhr.abort()
    }
  </script>
</body>
</html>